import React from 'react';
import PropTypes from 'prop-types';
import { DatePicker, Form, Input, Checkbox } from 'antd';
import moment from 'moment';
import Line from './Line';

const { Item } = Form;
const { TextArea } = Input;

const Confirm = props => <Checkbox {...props}>确认该员工相关的资料信息、网银账号、工作准证等均已取消</Checkbox>;

// 前直属上级确认申请
const Hr = ({ form, isEdit, relatedBusinessObject, tailFormItemLayout }) => {
    const { getFieldDecorator } = form;
    const { suggestionHr, confirmHr, actualLeaveDate } = relatedBusinessObject;
    const disabledDate = current => current && current < moment(relatedBusinessObject.applyLeaveDate);
    const renderLeaveDateInput = () => {
        if (isEdit) {
            return getFieldDecorator('actualLeaveDateHr', {
                initialValue: moment(actualLeaveDate),
                rules: [
                    {
                        required: true,
                        message: '请选择实际离职时间'
                    }
                ]
            })(<DatePicker disabledDate={disabledDate} />);
        }
        return actualLeaveDate;
    };
    const renderSuggestInput = () => {
        if (isEdit) {
            return getFieldDecorator('suggestionHr', {
                initialValue: relatedBusinessObject.suggestionHr,
                rules: [
                    {
                        max: 200,
                        message: '0-200个字符'
                    }
                ]
            })(<TextArea placeholder="请输入" rows={4} />);
        }
        return suggestionHr || '无';
    };
    return (
        <div>
            <Line />
            <h3>HR确认</h3>
            <Item label="实际离职时间" required={isEdit}>
                {renderLeaveDateInput()}
            </Item>
            <Item label="意见或建议" help={isEdit && '0-200个字符'}>
                {renderSuggestInput()}
            </Item>
            <Item {...tailFormItemLayout}>
                {isEdit ? (
                    getFieldDecorator('confirmHr', {
                        initialValue: relatedBusinessObject.confirmHr,
                        valuePropName: 'checked',
                        rules: [
                            {
                                validator(_, value, callback) {
                                    if (!value) {
                                        callback('请勾选确认！');
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ]
                    })(<Confirm />)
                ) : (
                    <Confirm disabled checked={confirmHr === '0'} />
                )}
            </Item>
        </div>
    );
};

Hr.propTypes = {
    isEdit: PropTypes.bool.isRequired,
    form: PropTypes.object.isRequired,
    relatedBusinessObject: PropTypes.object.isRequired
};

export default Hr;
